<template>
  <!-- header -->
  <LoginHeader>欢迎登录</LoginHeader>

  <section class="login-section">
    <div class="wrapper">
      <nav>
        <a :class="{active: activeName === 'account'}" href="javascript:;" @click="activeName = 'account'">账户登录</a>
        <a :class="{active: activeName === 'qrcode'}" href="javascript:;" @click="activeName = 'qrcode'">扫码登录</a>
      </nav>

      <!-- 账号登录 & 扫码登录 -->
      <div v-if="activeName === 'account'" class="account-box">
        <LoginForm></LoginForm>
      </div>
      <div v-if="activeName === 'qrcode'" class="qrcode-box">
        <img alt="" src="../../assets/images/qrcode.jpg">
        <p>打开 <a href="">小兔鲜App</a> 扫码登录</p>
      </div>
    </div>
  </section>

  <!-- footer -->
  <LoginFooter></LoginFooter>
</template>

<script>
import LoginHeader from '@/components/login/LoginHeader'
import LoginFooter from '@/components/login/LoginFooter'
import { ref } from 'vue'
import LoginForm from '@/components/login/LoginForm'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'

export default {
  name: 'Login',
  components: {
    LoginForm,
    LoginFooter,
    LoginHeader
  },
  setup() {
    const activeName = ref('account')

    // 当到登录页面存储回跳地址到vuex了, 为后序的QQ登录完成后, 作为回调地址
    const store = useStore()
    const route = useRoute()

    const redirectUrl = route.query.redirectUrl || '/'
    store.commit('user/setRedirectUrl', redirectUrl)
    return {
      activeName
    }
  }
}
</script>

<style lang="less" scoped>

.login-section {
  position: relative;
  height: 488px;
  background: url("../../assets/images/login-bg.png") no-repeat  center / cover;

  .wrapper {
    position: absolute;
    top: 54px;
    left: 50%;
    width: 380px;
    min-height: 400px;

    background-color: #fff;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);

    nav {
      display: flex;
      align-items: center;
      height: 55px;
      border-bottom: 1px solid #e4e4e4;
      padding: 0 40px;

      a {
        flex: 1;
        font-size: 18px;
        line-height: 1;
        // 与谁构成子绝互相
        position: relative;

        &:last-child {
          border-left: 1px solid #f5f5f5;
          text-align: right;
        }

        &.active {
          font-weight: bold;
          color: @xtxColor;
        }
      }
    }

    // 二维码的样式
    .qrcode-box {
      padding: 40px 60px;
      text-align: center;

      img {
        max-width: 205px;
        max-height: 205px;
        vertical-align: middle;
      }

      p {
        margin-top: 20px;

        a {
          font-size: 16px;
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
